<template>
  <div class="map-container">
    <div id="map" ref="mapContainer"></div>
    <div class="control-panel">
      <button @click="toggleLines">{{ showLines ? '隐藏路线' : '显示路线' }}</button>
    </div>
  </div>
</template>

<script setup lang="ts">
// 在Canvas中,坐标系的原点(0,0)在左上角,y轴向下为正方向
// 而在地图上展示时,图案会被自动翻转,因为地图的坐标系y轴向上为正方向
// 所以我们在Canvas中绘制的图案(T字形状)会在地图上呈现上下翻转的效果
// 为了在地图上得到正确朝向的T字形状,我们需要在Canvas中绘制一个上下翻转的T字

import { ref, onMounted, onUnmounted } from 'vue'
import mapboxgl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'
import { setMapInstance } from '@/utils/mapUtils'

const linePattern = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "coordinates": [
          [116.3609663110775,39.90555082963613],
          [116.36513985830857,39.906486574249726],
          [116.36899657728702,39.90718107732948],
          [116.37253838403512,39.90775492221525],
          [116.37789121547098,39.90869106426203],
          [116.3792296816161,39.90953627062768],
          [116.38233913209973,39.90998924810171],
          [116.38442528279074,39.9107137363292],
          [116.38761348983991,39.91140813229342],
          [116.39060476366188,39.911770221150675],
          [116.394541131251,39.91195174074085],
          [116.39969281055215,39.91146883793246],
          [116.40193630725992,39.91113665869679],
          [116.40417960025172,39.911015755423136],
          [116.40736194641431,39.90893769293538],
          [116.40769669686813,39.907584752655055],
          [116.41484458603816,39.907785825561945],
          [116.42171510935327,39.90687826976625],
          [116.43270273531374,39.904551220586626],
          [116.44371351551513,39.902998598059696],
          [116.44912211336191,39.89872703101295],
          [116.45486369372293,39.89510212224488],
          [116.45975733199015,39.89238345480078],
          [116.46195616820256,39.9024806538265],
          [116.46363100688961,39.908563939337796],
          [116.46381929184668,39.915022253189136],
          [116.46467098860109,39.92032957810571],
          [116.46821826426486,39.91864754070917]
        ],
        "type": "LineString"
      }
    },
    {
      "type": "Feature", 
      "properties": {},
      "geometry": {
        "coordinates": [
          [116.30369055281022,39.87850716802345],
          [116.31650583346811,39.878636234339695],
          [116.3272963335121,39.880318183716355],
          [116.33387442665395,39.88213021997575],
          [116.34130308872983,39.882907988947835],
          [116.35799894027372,39.88290817841116],
          [116.37064537187354,39.88290765821665],
          [116.38413690554438,39.88433055985735],
          [116.39847368977576,39.88355375878044],
          [116.41787089994693,39.88225938497294],
          [116.43812570790595,39.88186881630179],
          [116.4512642592988,39.87837693033623],
          [116.46341785820812,39.877339825534904],
          [116.47575556743737,39.877724875908996],
          [116.48789664137695,39.88342239796381],
          [116.49347279926326,39.884457633564665]
        ],
        "type": "LineString"
      }
    }
  ]
}

const mapContainer = ref<HTMLElement | null>(null)
let map: mapboxgl.Map | null = null
const showLines = ref(false)

// 创建T形图案
const createTPattern = () => {
  const canvas = document.createElement('canvas')
  canvas.width = 16 // 减小画布尺寸使图案更紧凑
  canvas.height = 16
  const ctx = canvas.getContext('2d')
  if (ctx) {
    // ctx.fillStyle = '#ff0000'
    // 绘制T的横线
    // ctx.fillRect(0, 8, 16, 1)
    // 绘制T的竖线
    // ctx.fillRect(8, 0, 1, 16)
    
     // 设置填充样式为红色
     ctx.fillStyle = '#ff0000';

    // 绘制反转T字的横线
    ctx.fillRect(0, 8, 16, 1);

    // 绘制反转T字的竖线
    ctx.fillRect(8, 8, 1, 7);
  }
  return canvas.getContext('2d')?.getImageData(0, 0, 16, 16)
}

const initMap = () => {
  if (!mapContainer.value) return
  
  mapboxgl.accessToken = import.meta.env.VITE_APP_MAP_TOKEN
  
  map = new mapboxgl.Map({
    container: mapContainer.value,
    style: 'mapbox://styles/mapbox/streets-v12',
    center: [116.397428, 39.90923],
    zoom: 12
  })

  map.on('load', () => {
    // 使用Canvas创建的T形图案
    const tPattern = createTPattern()
    if (tPattern) {
      // 添加判断，如果不存在就添加，否则不添加
      if (!(map as mapboxgl.Map & { hasImage: (id: string) => any }).hasImage('line-pattern')) {
        map?.addImage('line-pattern', tPattern)
      }
    }
    
    // 添加数据源
    map?.addSource('pattern-lines', {
      type: 'geojson',
      data: linePattern as GeoJSON.FeatureCollection
    })

    // 添加图案线图层
    map?.addLayer({
      id: 'pattern-lines-layer',
      type: 'line',
      source: 'pattern-lines',
      paint: {
        'line-pattern': 'line-pattern',
        'line-width': 16
      },
      layout: {
        'visibility': 'none',
        // 'line-join': 'round',
        // 'line-cap': 'round'
      }
    })

    // 添加线图层
    map?.addLayer({
      id: 'pattern-lines-layer-2',
      type: 'line',
      source: 'pattern-lines',
      paint: {
        // 'line-width': 16,
        'line-color': '#000000'
      },
      layout: {
        'visibility': 'none'
      }
    })

    // 添加线的标注图层
    map?.addLayer({
      id: 'pattern-lines-label',
      type: 'symbol',
      source: 'pattern-lines',
      layout: {
        'visibility': 'none',
        'text-field': ['get', 'name'],
        'text-size': 12,
        'symbol-placement': 'line-center',
        'text-offset': [0, 1]
      },
      paint: {
        'text-color': '#000000',
        'text-halo-color': '#ffffff',
        'text-halo-width': 2
      }
    })
  })
  

  setMapInstance(map)
}

const toggleLines = () => {
  showLines.value = !showLines.value
  const visibility = showLines.value ? 'visible' : 'none'
  
  if (map?.getLayer('pattern-lines-layer')) {
    map?.setLayoutProperty('pattern-lines-layer', 'visibility', visibility)
    // map?.setLayoutProperty('pattern-lines-layer-2', 'visibility', visibility)
    map?.setLayoutProperty('pattern-lines-label', 'visibility', visibility)
  }
}

onMounted(() => {
  initMap()
})

onUnmounted(() => {
  map?.remove()
  map = null
})
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 100vh;
  position: relative;
}

#map {
  width: 100%;
  height: 100%;
}

.control-panel {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1;
  background: white;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

button {
  padding: 8px 16px;
  background: #2c3e50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background: #34495e;
}
</style>